import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

class BottomSheetIndex extends StatefulWidget {
  const BottomSheetIndex({Key? key}) : super(key: key);

  @override
  _BottomSheetIndexState createState() => _BottomSheetIndexState();
}

class _BottomSheetIndexState extends State<BottomSheetIndex> {
  @override
  Widget build(BuildContext context) {

    // return Scaffold(
    //   // appBar: AppBar(title: Text('bottom sheet')),
    //   /// 第一种实现方法  CupertinoScaffold +  CupertinoScaffold.showCupertinoModalBottomSheet
    //   body: CupertinoScaffold(
    //     body: Builder(
    //       builder:(context)=> CupertinoPageScaffold(
    //         backgroundColor: Colors.white,
    //         navigationBar: CupertinoNavigationBar(
    //             middle: Text('modal bottom sheet')
    //         ),
    //         child: Center(
    //             child: Column(
    //           mainAxisAlignment: MainAxisAlignment.center,
    //           crossAxisAlignment: CrossAxisAlignment.center,
    //           children: [
    //             ElevatedButton.icon(
    //                 onPressed: () {
    //                   showMaterialModalBottomSheet(
    //                     context: context,
    //                     builder: (context) => Container(),
    //                   );
    //                 },
    //                 icon: Icon(CupertinoIcons.add_circled),
    //                 label: Text('showMaterialModalBottomSheet')),
    //             ElevatedButton.icon(
    //                 onPressed: () {
    //                   CupertinoScaffold.showCupertinoModalBottomSheet(
    //                     expand: true,
    //                     context: context,
    //                     backgroundColor: Colors.white,
    //                     builder: (context) => Container(
    //                         child:Center(
    //                           child:ElevatedButton(onPressed: (){
    //                             Navigator.of(context).popUntil((route) => route.settings.name == '/');
    //                           },child:Text('back to home'))
    //                         )
    //                     ),
    //                   );
    //                 },
    //                 icon: Icon(CupertinoIcons.add_circled),
    //                 label: Text('showCupertinoModalBottomSheet')),
    //             Divider(),
    //             ElevatedButton.icon(
    //                 onPressed: () {
    //                   /// 第二种 实现方法  MaterialWithModalsPageRoute 加 showCupertinoModalBottomSheet
    //                   Navigator.of(context).push(MaterialWithModalsPageRoute(
    //                       builder: (BuildContext context) {
    //                     return Scaffold(
    //                       appBar: AppBar(title:Text('showCupertinoModalBottomSheet')),
    //                       body: Container(
    //                           alignment: Alignment.center,
    //                           color:Colors.white,
    //                           child: ElevatedButton.icon(
    //                               onPressed: () {
    //                                 showCupertinoModalBottomSheet(
    //                                     context: context,
    //                                     builder: (context) {
    //                                       return Container(
    //                                         child:Center(
    //                                           child:ElevatedButton(onPressed: (){
    //                                             Navigator.of(context).pop();
    //                                           },child:Text('back'))
    //                                         )
    //                                       );
    //                                     });
    //                               },
    //                               icon: Icon(Icons.add),
    //                               label: Text('showCupertinoModalBottomSheet'))),
    //                     );
    //                   }));
    //                 },
    //                 icon: Icon(CupertinoIcons.add_circled),
    //                 label: Text('MaterialWithModalsPageRoute')),
    //           ],
    //         )),
    //       ),
    //     ),
    //   ),
    // );

    /// 第一种实现方法  CupertinoScaffold +  CupertinoScaffold.showCupertinoModalBottomSheet
    return CupertinoScaffold(body: Scaffold(
      appBar: AppBar(title: Text('bottom sheet')),
      body:Builder(
        builder: (context) {
          return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton.icon(
                      onPressed: () {
                        showMaterialModalBottomSheet(
                          context: context,
                          builder: (context) => Container(),
                        );
                      },
                      icon: Icon(CupertinoIcons.add_circled),
                      label: Text('showMaterialModalBottomSheet')),
                  ElevatedButton.icon(
                      onPressed: () {
                        CupertinoScaffold.showCupertinoModalBottomSheet(
                          expand: true,
                          context: context,
                          backgroundColor: Colors.white,
                          builder: (context) => Container(
                              child:Center(
                                  child:ElevatedButton(onPressed: (){
                                    Navigator.of(context).popUntil((route) => route.settings.name == '/');
                                  },child:Text('back to home'))
                              )
                          ),
                        );
                      },
                      icon: Icon(CupertinoIcons.add_circled),
                      label: Text('showCupertinoModalBottomSheet')),
                  Divider(),
                  ElevatedButton.icon(
                      onPressed: () {
                        /// 第二种 实现方法  MaterialWithModalsPageRoute 加 showCupertinoModalBottomSheet
                        Navigator.of(context).push(MaterialWithModalsPageRoute(
                            builder: (BuildContext context) {
                              return Scaffold(
                                appBar: AppBar(title:Text('showCupertinoModalBottomSheet')),
                                body: Container(
                                    alignment: Alignment.center,
                                    color:Colors.white,
                                    child: ElevatedButton.icon(
                                        onPressed: () {
                                          showCupertinoModalBottomSheet(
                                              context: context,
                                              builder: (context) {
                                                return Container(
                                                    child:Center(
                                                        child:ElevatedButton(onPressed: (){
                                                          Navigator.of(context).pop();
                                                        },child:Text('back'))
                                                    )
                                                );
                                              });
                                        },
                                        icon: Icon(Icons.add),
                                        label: Text('showCupertinoModalBottomSheet'))),
                              );
                            }));
                      },
                      icon: Icon(CupertinoIcons.add_circled),
                      label: Text('MaterialWithModalsPageRoute')),
                ],
              ));
        }
      )
    ));
  }
}
